<template>
  <div class="index">
    <div class="scroll-list-wrap">
      <cube-scroll ref="scroll" :options="options" nest-mode="native">
        <!-- banner -->
        <cube-slide ref="slide" :data="bannerLists" @change="changePage">
          <cube-slide-item
            v-for="(item, index) in bannerLists"
            :key="index"
            @click.native="clickHandler(item, index)"
          >
            <img class="banner" :src="item.image" />
          </cube-slide-item>
        </cube-slide>

        <!-- <cube-scroll-nav-bar :current="current" :labels="labels" @change="changeHandler" /> -->

        <div class="cube-index-list-content">
          <!---->
          <ul>
            <li class="cube-index-list-group">
              <div class="cube-index-list-anchor">
                直播课程
                <span class="more" @click="showMore(1)">更多</span>
              </div>
              <ul class="list_ul cube-scroll-list">
                <li
                  class="list_li"
                  v-for="(item, index) in courseLiveLists"
                  :key="index"
                >
                  <!-- <router-link
                    :to="{ path: '/course', query: { course: item } }"
                  > -->
                  <div @click="jumpToLiveCourse(item)">
                    <div class="image-con l">
                      <img :src="item.thumb" :onerror="noImage" />
                      <!-- <div class="live"></div> -->
                    </div>
                    <div class="text-con l">
                      <div class="title">{{ item.title }}</div>
                      <div class="desc">
                        {{ item.author }}
                        <!-- <span class="dot">·</span>
                        {{ item.courseName }} -->
                        <span
                          :class="getCourseStatusClass(item.status)"
                          v-if="item.status != 'PENDING'"
                          >{{ item.status | statusFilter }}</span
                        >
                      </div>
                      <div class="user-info">
                        时间：{{
                          item.startTime | dateFormat("yyyy-MM-dd hh:mm")
                        }}
                        ~ {{ item.endTime | dateFormat("hh:mm") }}
                      </div>
                    </div>
                  </div>
                  <!-- </router-link> -->
                </li>
                <li v-if="(!courseLiveLists || courseLiveLists.length <= 0)" class="list_li">
                  <span class="no-data">暂无数据</span>
                </li>
              </ul>
            </li>
            <li class="cube-index-list-group">
              <div class="cube-index-list-anchor">
                录播课程
                <span class="more" @click="showMore(0)">更多</span>
              </div>
              <ul class="list_ul cube-scroll-list">
                <li
                  class="list_li"
                  v-for="(item, index) in courseVodLists"
                  :key="index"
                >
                  <!-- <router-link
                    :to="{ path: '/course', query: { course: item } }"
                  > -->
                  <div @click="jumpToCourse(item)">
                    <div class="image-con l">
                      <img :src="item.thumb" :onerror="noImage" />
                    </div>
                    <div class="text-con l">
                      <div class="title">{{ item.title }}</div>
                      <div class="desc">
                        {{ item.author }}
                      </div>
                      <div class="user-info">进度：{{ item.progress }}%</div>
                    </div>
                  </div>
                  <!-- </router-link> -->
                </li>
                <li v-if="(!courseVodLists || courseVodLists.length <= 0)" class="list_li">
                  <span class="no-data">暂无数据</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <!-- <ul class="list_ul cube-scroll-list">
          <li class="list_li" v-for="(item, index) in lists" :key="index">
            <router-link to="/course">
              <div class="image-con l">
                <img :src="item.image" />
                <div class="live" v-if="item.isLive">直播</div>
              </div>
              <div class="text-con l">
                <div class="title">{{item.title}}</div>
                <div class="desc">
                  {{item.teacher}}
                  <span class="dot">·</span>
                  {{item.academic}}
                </div>
                <div class="user-info">{{item.time ? "直播时间:":""}} {{item.time}}</div>
              </div>
            </router-link>
          </li>
        </ul>-->
      </cube-scroll>
    </div>
  </div>
</template>

<script>
import {
  getLiveCourseList,
  getCourseList // ,
  // liveCourseState
} from "../api/course";
import { getBannerList } from "../api/school";
import {
  MessageKey,
  EventManager,
  enterRoom,
  setCurrentCourse
} from "../api/message";
import coursestatus from "../enum/coursestatus";

export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 5,
      selectedItem: null,
      bannerLists: [],
      courseLiveLists: [],
      courseVodLists: [],
      current: "全部",
      labels: [
        "全部",
        "高等数学",
        "大学英语",
        "管理学",
        "会计学",
        "统计学",
        "财务管理"
      ],
      listsbak: [],
      noImage: 'this.src="' + require("@/assets/bg_logo.png") + '"'
    };
  },
  created() {
    this.registerEvent();

    getBannerList()
      .then(response => {
        console.log(response);
        this.bannerLists = response.data;
      })
      .catch(error => {
        console.log(error);
        this.$toastErrorCode(error);
      });

    getLiveCourseList(this.pageIndex, this.pageSize)
      .then(response => {
        console.log(response);
        this.courseLiveLists = response.data;
      })
      .catch(error => {
        console.log(error);
        this.$toastErrorCode(error);
      });

    getCourseList(this.pageIndex, this.pageSize)
      .then(response => {
        console.log(response);
        this.courseVodLists = response.data;
      })
      .catch(error => {
        console.log(error);
        this.$toastErrorCode(error);
      });

    if (!self.currentAudioContext) {
      self.currentAudioContext = new (window.AudioContext ||
        window.webkitAudioContext)();
    }
  },
  computed: {
    options() {
      return {
        scrollY: true,
        scrollbar: false
      };
    }
  },
  methods: {
    changePage(current) {
      // console.log("当前轮播图序号为:" + current);
    },
    clickHandler(item, index) {
      console.log(item, index);
      if (item.url && item.url != '#' && item.url.length > 0) {
        window.open(item.url, '_blank')
      }
    },
    changeHandler(cur) {
      this.current = cur;

      if (!this.listsbak || this.listsbak.length <= 0) {
        this.listsbak = this.lists;
      }

      if (cur == this.labels[0]) {
        this.lists = this.listsbak;
      } else {
        this.lists = [
          {
            image: "http://img2.mukewang.com/5ed8c19b000108e602940333.jpg",
            title: "计算机应用基础",
            time: "2020.07.01 14:00 - 16:00",
            teacher: "陈子兴",
            academic: "资深软件架构师",
            isLive: 1
          }
        ];
      }
    },
    showMore(isLive) {
      // this.$router.push({ path: "/coursemore", query: { isLive: isLive } });
      this.$router.push({ name: "coursemore", params: { isLive: isLive } });
    },
    jumpToCourse(item) {
      if (self.currentAudioContext.state === "suspended") {
        self.currentAudioContext.resume();
      }
      this.$router.push({ path: "/course", query: { course: item } });
    },
    jumpToLiveCourse(item) {
      if (self.currentAudioContext.state === "suspended") {
        self.currentAudioContext.resume();
      }

      item.signCount = 1;
      this.selectedItem = item;
      setCurrentCourse(this.selectedItem);
      enterRoom(item.id);
    },
    getCourseStatusClass(value) {
      if (!value) return "";

      let result = "";
      switch (value) {
        case coursestatus.kCOURSE_STATUS_PLAYING:
          result = "PLAYING";
          break;
        case coursestatus.kCOURSE_STATUS_READY:
          // result = "READY";
          result = "PLAYING";
          break;
        case coursestatus.kCOURSE_STATUS_PENDING:
          result = "PENDING";
          break;
        case coursestatus.kCOURSE_STATUS_UPLOADED:
          result = "UPLOADED";
          break;
        case coursestatus.kCOURSE_STATUS_END:
          result = "END";
          break;
        case coursestatus.kCOURSE_STATUS_CANCEL:
          result = "CANCEL";
          break;
        default:
          break;
      }
      return result.toLowerCase();
    },
    enterRoomSuccess() {
      this.jumpToCourse(this.selectedItem);
    },
    registerEvent() {
      EventManager.Register(
        MessageKey.enterRoom,
        this.enterRoomSuccess.bind(this),
        this
      );
      this.$once("hook:beforeDestroy", () => {
        EventManager.UnRegister(MessageKey.enterRoom, this);
      });
    }
  },
  filters: {
    statusFilter: function(value) {
      if (!value) return "";

      let result = "";
      switch (value) {
        case coursestatus.kCOURSE_STATUS_UPLOADED:
        case coursestatus.kCOURSE_STATUS_END:
          result = "已结束";
          break;
        case coursestatus.kCOURSE_STATUS_PLAYING:
        case coursestatus.kCOURSE_STATUS_READY:
          result = "正在直播";
          break;
        default:
          break;
      }
      return result;
    }
  }
};
</script>

<style lang="stylus" scoped>
.index {
  position: fixed;
  top: 0px;
  left: 0;
  bottom: 0px;
  width: 100%;
}

.banner {
  display: block;
  width: 100%;
  height: calc(100vw * 7 / 20);
}

.scroll-list-wrap {
  height: 100%;
}

.cube-scroll-nav-bar_horizontal {
  border-bottom: 1px solid #eee;
}

.list_ul {
  display: flex;
  flex-wrap: wrap;

  .list_li {
    width: 100%;
    padding: 10px;

    img {
      width: 100%;
    }

    .label {
      font-size: 14px;
      padding-bottom: 10px;
    }

    .image-con {
      width: 28%;
    }

    .text-con {
      width: 68.5%;
      padding-left: 10px;
    }

    .l {
      position: relative;
      float: left;
    }

    .live {
      background-image: linear-gradient(131deg, #f92d2d 0, #f01414 100%);
      position: absolute;
      color: #FFF;
      border: 2px solid #FFF;
      border-radius: 5px;
      padding: 2px;
      font-size: 12px;
      top: 2px;
      right: 10px;
    }

    .title {
      font-size: 16px;
      line-height: 20px;
      color: #2B333B;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
      text-align: left;
    }

    .desc {
      padding: 5px;
      font-size: 12px;
      line-height: 12px;
      border-radius: 5px;
      color: #2B333B;
      background: rgba(0, 0, 0, 0.04);
      text-align: left;
      margin: 4px 0px 8px 0px;

    .ready {
        float: right;
        font-size: 10px;
        font-weight: normal;
        color: #00a65a;
        border: 1px solid #00a65a;
        border-radius: 3px;
        padding: 2px 2px;
        margin-top: -3px;
        position: absolute;
        right: 5px;
    }
      .playing {
        float: right;
        font-size: 10px;
        font-weight: normal;
        color: #f92d2d;
        border: 1px solid #f92d2d;
        border-radius: 3px;
        padding: 2px 2px;
        margin-top: -3px;
        position: absolute;
        right: 5px;
      }

      .uploaded {
        float: right;
        font-size: 10px;
        font-weight: normal;
        color: #777;
        border: 1px solid #777;
        border-radius: 3px;
        padding: 2px 2px;
        margin-top: -3px;
        position: absolute;
        right: 5px;
      }

      .end {
        float: right;
        font-size: 10px;
        font-weight: normal;
        color: #777;
        border: 1px solid #777;
        border-radius: 3px;
        padding: 2px 2px;
        margin-top: -3px;
        position: absolute;
        right: 5px;
      }
    }

    .user-info {
      font-size: 12px;
      line-height: 12px;
      color: #333;
      text-align: left;
    }

    .hide {
      display: none;
    }
  }

  .no-data {
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    display: block;
    color: #999;
  }
}

.cube-index-list-anchor {
  background: #f7f7f7;
  color: #666;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  padding: 0 0 0 10px;
  font-weight: bold;

  .more {
    float: right;
    font-size: 12px;
    font-weight: normal;
    color: #4E6EF2;
    padding: 0 10px;
  }
}
</style>
